import 'package:flutter/material.dart';
import 'package:flutter_demo/generated/assets.dart';
import 'package:flutter_demo/pages/page_with_title.dart';
import 'package:flutter_demo/widgets/app_widgets.dart';

class FittedBoxPage extends PageWithTitle {
  const FittedBoxPage({super.key}) : super("内容自适应容器(FittedBox)");

  @override
  List<Widget> buildContentWidgets(BuildContext context) {
    return const [
      PrimaryTitle("简介"),
      BodyText("它类似Image.fit效果，实现子组件在FittedBox中的填充效果"),
      AppSpacer.large,
      _Example(),
      AppSpacer.mini,
      UlItem("FittedBox"),
      BodyText("内容自适应容器通过变换（位移、缩放）实现子组件对齐和填充效果"),
      NoticeText("- 组件只做了变换而没有裁剪，导致内容绘制会超出组件边界，建议使用ClipRect进"
          "行裁剪"),
      NoticeText("- 这里的Image仅作为举例使用，实际只有图片要设置填充方式的话应该直接用"
          "Image.fit来设置"),
      LabelText("- fit 填充方式，具体效果看上方例子"),
      LabelText("- alignment 对齐，在设置完填充后若内容显示有裁剪或者容器存在留白，可以使用"
          "对齐来进一步调整显示内容"),
    ];
  }
}

class _Example extends StatelessWidget {
  const _Example();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        UnconstrainedBox(
          child: Container(
            width: 120,
            height: 67.5,
            color: Theme.of(context).colorScheme.primaryContainer,
            child: ClipRect(
              child: FittedBox(
                fit: BoxFit.contain,
                child: Image.asset(Assets.imagesBenxi),
              ),
            ),
          ),
        ),
        const LabelText("contain(默认)，同android的fitCenter，效果是将内容缩放到刚好可"
            "以放到容器中，通常在显示所有内容为最高优先级的情况下会使用这种缩放方式"),
        AppSpacer.mini,
        UnconstrainedBox(
          child: Container(
            width: 120,
            height: 67.5,
            color: Theme.of(context).colorScheme.primaryContainer,
            child: ClipRect(
              child: FittedBox(
                fit: BoxFit.fill,
                child: Image.asset(Assets.imagesBenxi),
              ),
            ),
          ),
        ),
        const LabelText("fill，同android的fitXY，效果是将内容拉伸铺满容器，常用于背景图片设置"),
        AppSpacer.mini,
        SizedBox(
          width: double.infinity,
          child: Wrap(
            alignment: WrapAlignment.spaceEvenly,
            spacing: 10,
            children: [
              Container(
                width: 80,
                height: 45,
                color: Theme.of(context).colorScheme.primaryContainer,
                child: ClipRect(
                  child: FittedBox(
                    fit: BoxFit.cover,
                    child: Image.asset(Assets.imagesBenxi),
                  ),
                ),
              ),
              Container(
                width: 80,
                height: 45,
                color: Theme.of(context).colorScheme.primaryContainer,
                child: ClipRect(
                  child: FittedBox(
                    fit: BoxFit.cover,
                    alignment: Alignment.topCenter,
                    child: Image.asset(Assets.imagesBenxi),
                  ),
                ),
              ),
              Container(
                width: 80,
                height: 45,
                color: Theme.of(context).colorScheme.primaryContainer,
                child: ClipRect(
                  child: FittedBox(
                    fit: BoxFit.cover,
                    alignment: Alignment.bottomCenter,
                    child: Image.asset(Assets.imagesBenxi),
                  ),
                ),
              ),
            ],
          ),
        ),
        const LabelText("cover，同android的centerCrop，效果是居中缩放到图片完全覆盖容器，"
            "多余部分裁剪，为了避免不同规格的资源导致大量留白，在图片浏览中cover是使用最多的填"
            "充方式，开发者可以通过alignment调整要显示的部分"),
        AppSpacer.mini,
        SizedBox(
          width: double.infinity,
          child: Wrap(
            alignment: WrapAlignment.spaceEvenly,
            spacing: 10,
            children: [
              Container(
                width: 120,
                height: 67.5,
                color: Theme.of(context).colorScheme.primaryContainer,
                child: ClipRect(
                  child: FittedBox(
                    fit: BoxFit.fitWidth,
                    alignment: Alignment.topCenter,
                    child: Image.asset(Assets.imagesBenxi),
                  ),
                ),
              ),
              Container(
                width: 120,
                height: 67.5,
                color: Theme.of(context).colorScheme.primaryContainer,
                child: ClipRect(
                  child: FittedBox(
                    fit: BoxFit.fitHeight,
                    child: Image.asset(Assets.imagesBenxi),
                  ),
                ),
              ),
            ],
          ),
        ),
        const LabelText("fitWidth fitHeight，缩放图片到填满容器的宽度、高度，同样可以结合"
            "alignment调整要显示的部分"),
        AppSpacer.mini,
        UnconstrainedBox(
          child: Container(
            width: 120,
            height: 67.5,
            color: Theme.of(context).colorScheme.primaryContainer,
            child: ClipRect(
              child: FittedBox(
                fit: BoxFit.none,
                child: Image.asset(Assets.imagesBenxi),
              ),
            ),
          ),
        ),
        const LabelText("none，不做任何缩放，直接将内容居中,同android的center"),
        AppSpacer.mini,
        SizedBox(
          width: double.infinity,
          child: Wrap(
            alignment: WrapAlignment.spaceEvenly,
            spacing: 10,
            children: [
              Container(
                width: 120,
                height: 67.5,
                color: Theme.of(context).colorScheme.primaryContainer,
                child: ClipRect(
                  child: FittedBox(
                    fit: BoxFit.scaleDown,
                    alignment: Alignment.topCenter,
                    child: Image.asset(Assets.imagesBenxi),
                  ),
                ),
              ),
              Container(
                width: 120,
                height: 67.5,
                color: Theme.of(context).colorScheme.primaryContainer,
                child: ClipRect(
                  child: FittedBox(
                    fit: BoxFit.scaleDown,
                    child: Image.asset(
                      Assets.imagesBenxi,
                      width: 40,
                      height: 40,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        const LabelText(
            "scaleDown，类似contain，但在内容的宽高都小于容器时直接居中，同android的centerInside"),
        AppSpacer.mini,
      ],
    );
  }
}
